<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>.js</title>
</head>

<body>
	<div id="app">
		<textarea v-model="sss" style="display: block;width: 100%;height: 200px;" name="" id=""></textarea>
		<div @click="aaaa"
			style="margin: 30px auto 0; width: 100px;height: 50px;background-color: #f00;line-height: 50px;text-align: center;">
			转换</div>
	</div>

	<script src="js/jquery.min.js"></script>
	<script src="js/vue.global.js"></script>
	<script>

		const { createApp, ref, reactive, onMounted } = Vue
		createApp({
			setup() {
				onMounted(() => {
					$('#app').show()
				})

				let sss = ref('');
				function aaaa() {
					// console.log(sss.value);
					const convertedCss = convertRpxToRem(sss.value, 100);
					console.log(convertedCss);
				}
				// 转换函数
				function convertRpxToRem(cssText, baseSize = 100) {
					if (!cssText || typeof cssText !== 'string') {
						return cssText;
					}

					return cssText.replace(/(\d*\.?\d+)rpx/g, (match, number) => {
						const value = parseFloat(number);
						// 通常设计稿是基于750px，1rem = 100px，所以 1rpx = 0.01rem
						const remValue = value / baseSize;
						return remValue + 'rem';
					});
				}

				return {
					sss,
					aaaa
				}
			}
		}).mount('#app')
	</script>
</body>

</html>